{% load staticfiles %}
{% csrf_token %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="{% static 'css/layui.css' %}">
        <link rel="stylesheet" href="{% static 'css/index.css' %}">
        <title>编写yaml</title>
    </head>
    <body style="height: 100%;">
        <div id="hosts_left" class="layui-hosts-left">
            <form id="formgroup" name="formgroup" class="layui-form layui-form-pane">
                <table class="layui-table layui-table-group" id="group_list" lay-filter="group_list"></table>
                <div class="layui-form-item layui-form-item-group">
                    <label class="layui-form-label">组名</label>
                    <div class="layui-input-inline">
                        <input id="groupname" type="text" name="groupname" required lay-verify="required" autocomplete="off" placeholder="请输入组名称" class="layui-input">

                    </div>
                    <button type="button" id="submitgroup" class="layui-btn layui-btn-danger" lay-submit lay-filter="submitgroup">添加</button>
                    <button type="button" id="modgroup" class="layui-btn layui-btn-warm" lay-submit lay-filter="modgroup">修改</button>
                    <button type="reset" id="resetgroup" class="layui-btn layui-btn-danger" style="display:none" lay-submit lay-filter="resetgroup">重置</button>
                </div>
                <div class="layui-form-item layui-form-item-group" >
                    <label class="layui-form-label">选择密钥</label>
                    <div class="layui-input-inline">
                        <select id="keyslist" name="keyslist" lay-filter="aihao">
                        </select>
                    </div>
                    <label class="layui-form-label">分组描述</label>
                    <div class="layui-input-inline">
                        <input id="groupdescribe" type="text" name="groupdescribe" required lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text layui-form-item-group">
                    <label class="layui-form-label">组内IP</label>
                    <div class="layui-input-block">
                        <textarea id="groupip" name="groupip" placeholder="请输入IP,逗号分隔" required lay-verify="required" class="layui-textarea" style="height: 120px;"></textarea>
                    </div>
                </div>
            </form>
        </div>
        <div id="hosts_right" class="layui-hosts-right">
            <form id="formhost" name="formhost" class="layui-form layui-form-pane">
                <div class="layui-form-item layui-form-item-hosts">
                    <label class="layui-form-label">IP地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="hostip" required lay-verify="required" autocomplete="off" placeholder="请输入IP" class="layui-input">
                    </div>
                    <button type="button" id="submithostip" class="layui-btn" lay-submit lay-filter="submithostip">添加</button>
                    <button type="reset" id="resethostip" class="layui-btn" style="display:none" lay-submit lay-filter="resethostip">重置</button>
                </div>
{#                <div class="layui-form-item">#}
{#                    <label class="layui-form-label">用户端口</label>#}
{#                    <div class="layui-input-inline">#}
{#                        <input type="text" name="hostuser" required lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input" style="width:120px">#}
{#                        <input type="text" name="hostport" required lay-verify="required" autocomplete="off" placeholder="请输入SSH端口" class="layui-input" style="width:120px">#}
{#                    </div>#}
{#                </div>#}
                <div class="layui-form-item layui-form-item-hosts">
                    <label class="layui-form-label">用户端口</label>
                    <div class="layui-input-inline">
                        <input type="text" name="hostuser" required lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:120px;">
                        <input type="text" name="hostport" required lay-verify="required" autocomplete="off" placeholder="请输入SSH端口" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-item-hosts">
                    <label class="layui-form-label">主机描述</label>
                    <div class="layui-input-inline">
                        <input type="text" name="hostdescrib" required lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <hr class="layui-bg-red" style="margin: -10px 0 -5px 0;">
                <table class="layui-table layui-table-host" id="host_list" lay-filter="host_list"></table>
            </form>
            <div id="getlistdiv" class="layui-button-left">
                <div class="demoTable">
                    <div class="layui-btn-group demoTable" id="layerDemo">
                        <button data-method="getCheckLength" data-type="getCheckLength" class="layui-btn layui-btn-normal">生成</button>
                    </div>
                </div>
            </div>

        </div>
    </body>
    <script src="{% static 'layui.all.js' %}"></script>
    <script type="text/html" id="hostsDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delhost">删除</a>
    </script>
    <script>
        var host_list = {{ hosts_list|safe }};
        var keys_list = {{ keys_list|safe }};
        var group_list = {{ group_list|safe }};
    </script>
    <script type="text/html" id="groupstatus">
        {% verbatim myblock %}
            {{#  if(d.group_using == 0){ }}
                <span class="label label-success">已启用</span>
            {{#  } else { }}
                <span class="label label-default">已禁用</span>
            {{#  } }}
        {% endverbatim myblock %}
    </script>
    <script type="text/html" id="groupbutton">
        {% verbatim myblock %}
            {{#  if(d.group_using == 0){ }}
                <span title="停用" class="handle-btn handle-btn-stop"  lay-event="disgroup"><i class="layui-icon">&#xe651;</i></span>
            {{#  } else { }}
                <span title="启用" class="handle-btn handle-btn-start" lay-event="engroup"><i class="layui-icon">&#xe652;</i></span>
            {{#  } }}
        {% endverbatim myblock %}
        <span title="查看" class="handle-btn" lay-event="checkgroup"><i class="layui-icon">&#xe643;</i></span>
        <span title="修改" class="handle-btn" lay-event="modifygroup"><i class="layui-icon">&#xe6b2;</i></span>
        <span title="删除" class="handle-btn" lay-event="delgroup"><i class="layui-icon">&#xe640;</i></span>
    </script>
    <script src="{% static 'js/automation/yamlhosts.js' %}"></script>
</html>